<div class="ui small secondary menu debug_toolbar">
	<a class="popup icon item start" data-content="Start application" tabindex='0'><i class="play icon"></i></a>
	<a class="popup icon item stop" data-content="Stop application"><i class="stop icon"></i></a>
	<a class="popup icon item refresh" data-content="Refresh log/comm"><i class="refresh icon"></i></a>
	<a class="popup icon item watch" data-content="Auto refresh"><i class="unhide icon"></i></a>
	<a class="popup icon item unwatch" data-content="Stop auto refresh"><i class="hide icon"></i></a>
</div>
<form class="ui debuger_main form">
	<div class="ui success message"></div>
	<div class="ui error message"></div>
</form>
<div class="ui styled fluid accordion">
	<div class="active title">
		<i class="dropdown icon"></i>
		{{_("Log Watcher")}}
	</div>
	<div class="active content">
		<table id="log_table" class="ui selectable celled striped collapsing table" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>Timestamp</th>
					<th>Level</th>
					<th>Process</th>
					<th>Content</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>Timestamp</th>
					<th>Level</th>
					<th>Process</th>
					<th>Content</th>
				</tr>
			</tfoot>
		</table>
	</div>
	<div class="active title">
		<i class="dropdown icon"></i>
		{{_("Comm Data Watcher")}}
	</div>
	<div class="active content">
		<table id="comm_table" class="ui selectable celled striped collapsing table" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>Timestamp</th>
					<th>SN</th>
					<th>Description</th>
					<th>Data</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>Timestamp</th>
					<th>SN</th>
					<th>Description</th>
					<th>Data</th>
				</tr>
			</tfoot>
		</table>
	</div>
</div>

<script>

function reset_debug_log() {
	$('.ui.debuger_main.form').removeClass('success').removeClass('error');
};
function debug_log_err(msg) {
	reset_debug_log();
	console.log('Exception:' + msg);
	$('.ui.debuger_main.form .ui.error.message').html(msg);
	$('.ui.debuger_main.form').addClass('error');
};
function debug_log_info(msg) {
	reset_debug_log();
	console.log('OK:' + msg);
	$('.ui.debuger_main.form .ui.success.message').html(msg);
	$('.ui.debuger_main.form').addClass('success');
	setTimeout(reset_debug_log, 2000);
};

function start_app(inst) {
	$.post("/app/start", {from_web:true, inst:inst}, function(data) {
		debug_log_info('<i>' + data + '</i>');
	})
	.done(function() {
	})
	.fail(function() {
		debug_log_err('<i>{{_("Failed to send start request")}}</i>');
	});
};

function stop_app(inst) {
	$.post("/app/stop", {from_web:true, inst:inst, reason:'Stop from web'}, function(data) {
		debug_log_info('<i>' + data + '</i>');
	})
	.done(function() {
	})
	.fail(function() {
		debug_log_err('<i>{{_("Failed to send stop request")}}</i>');
	});
};

var log_table = null;
var log_table_timer = null;
var comm_table = null;
var comm_table_timer = null;
function start_watch() {
	if (!log_table_timer) {
		log_table_timer = setInterval( function () {
			comm_table.ajax.reload( null, false ); // user paging is not reset on reload
		}, 3000 );
	};

	if (!comm_table_timer) {
		comm_table_timer = setInterval( function () {
			log_table.ajax.reload( null, false ); // user paging is not reset on reload
		}, 3000 );
	};
};
function stop_watch() {
	if (log_table_timer) {
		clearInterval(log_table_timer);
		log_table_timer = null;
	};
	if (comm_table_timer) {
		clearInterval(comm_table_timer);
		comm_table_timer = null;
	};
};

var debug_loaded = false;
function debug_init() {
	if (debug_loaded) {
		return;
	}
	debug_loaded = true;
	var inst = "{{app.inst}}";
	$('.ui.menu.debug_toolbar .item.start').click(function() {
		start_app(inst);
	});
	$('.ui.menu.debug_toolbar .item.stop').click(function() {
		stop_app(inst);
	});
	$('.ui.menu.debug_toolbar .item.refresh').click(function() {
		log_table.ajax.reload( null, false ); // user paging is not reset on reload
		comm_table.ajax.reload( null, false ); // user paging is not reset on reload
	});
	var watch_btn = $('.ui.menu.debug_toolbar .item.watch');
	var unwatch_btn = $('.ui.menu.debug_toolbar .item.unwatch');
	watch_btn.click(function() {
		start_watch();
		watch_btn.hide();
		unwatch_btn.show();
	});
	unwatch_btn.click(function() {
		stop_watch();
		unwatch_btn.hide();
		watch_btn.show();
	});
	unwatch_btn.hide();
	comm_table = $('#comm_table').DataTable({
		"ajax": {
			"url": "/sys/comm?app=" + "{{app.inst}}",
			"dataSrc": ""
		},
		"columns": [
			{ "data": "ts" },
			{ "data": "sn" },
			{ "data": "dir" },
			{ "data": "data" },
		]
	});
	log_table = $('#log_table').DataTable({
		"ajax": {
			"url": "/app/log?app=" + "{{app.inst}}",
			"dataSrc": ""
		},
		"columns": [
			{ "data": "time" },
			{ "data": "level" },
			{ "data": "process" },
			{ "data": "content" },
		]
	});
};
</script>
